<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>
<script src="https://unpkg.com/vue@next"></script>
<script>
    // 动态组件:根据数据的变化,结合component这个标签,来随时动态切换组件的显示
    // const app = Vue.createApp({
    //     data(){
    //         return{
    //             currentItem:'input-item'
    //         }
    //     },
    //     methods:{
    //         handleClick(){
    //             if(this.currentItem==='input-item'){
    //                 this.currentItem='common-item'
    //             }else{
    //                 this.currentItem='input-item'
    //             }
    //         }
    //     },
    //     template:`
    //     <keep-alive>
    //         <component :is="currentItem" />
    //     </keep-alive>
    //     <button @click="handleClick">切换</button>
    //     `
    // });
    // app.component('input-item',{
    //     template:`
    //     <input />
    //     `
    // })
    // app.component('common-item',{
    //     template:`
    //     <div>hello world</div>
    //     `
    // })
    // const vm = app.mount('#root')

    // 异步组件
    const app = Vue.createApp({
        template:`
        <div>
            <common-item />
            <async-common-item />
        </div>
        `
    });
    app.component('common-item',{
        template:`
        <div>hello world</div>
        `
    })
    app.component('async-common-item',Vue.defineAsyncComponent(()=>{
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve({
                    template:`<div>this is an async component</div>`
                })
            },4000)
        })
    }))

    const vm = app.mount('#root')
</script>